<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PoiPicker/examples/search.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/misc/PoiPicker/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>POI搜索</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0;
            font-size: 13px;
        }

        #outer-box {
            height: 100%;
            padding-right: 300px;
        }

        #container {
            height: 100%;
            width: 100%;
        }

        #panel {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            overflow: auto;
            width: 300px;
            z-index: 999;
            border-left: 1px solid #eaeaea;
            background: #fff;
        }

        #searchBar {
            height: 30px;
            background: #ccc;
        }

        #searchInput {
            width: 100%;
            height: 30px;
            line-height: 30%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: none;
            border-bottom: 1px solid #ccc;
            padding: 0 5px;
        }

        #searchResults {
            overflow: auto;
            height: calc(100% - 30px);
        }

        .amap_lib_placeSearch .poibox.highlight {
            background-color: #CAE1FF;
        }

    </style>
</head>

<body>
<div id="outer-box">
    <div id="container" class="map" tabindex="0"></div>
    <div id="panel" class="scrollbar1">
        <div id="searchBar">
            <input id="searchInput" placeholder="输入关键字搜素POI" />
        </div>
        <div id="searchResults"></div>
    </div>
</div>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "84ec24274e0fb47a345a8ce979ef4cfb",
    };
</script>
<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=1869d3c6fca1a95eb881fe32c3b3a8b2'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        zoom: 10
    });

    AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {

        var poiPicker = new PoiPicker({
            input: 'searchInput',
            placeSearchOptions: {
                map: map,
                pageSize: 10
            },
            searchResultsContainer: 'searchResults'
        });

        poiPicker.on('poiPicked', function(poiResult) {

            poiPicker.hideSearchResults();

            var source = poiResult.source,
                poi = poiResult.item;
            // map.setCenter(poi.location); // 移动地图到选中的POI位置
            // map.setZoom(15); // 设置缩放级别，例如15
            if (source !== 'search') {

                //suggest来源的，同样调用搜索
                poiPicker.searchByKeyword(poi.name);

            } else {

                //console.log(poi);
            }
        });

        poiPicker.onCityReady(function() {
            poiPicker.searchByKeyword('美食');
        });
    });
</script>
</body>

</html>